<template>
  <div class="textarea-wrap gap-col-5" :class="{ 'h-full': heightFull }">
    <label v-if="label" class="font-size-12 font-weight-400 line-height-120">{{ label }}</label>
    <textarea
      v-model="value"
      class="font-size-14 font-weight-500 line-height-140"
      :class="{ error: !!errMsg, 'bg-surface': !bgDark, 'bg-background': bgDark, 'h-full': heightFull }"
      :placeholder="placeholder"
      :disabled="disabled"
      :style="{ height }"
    ></textarea>
    <div v-if="errMsg" class="err-msg font-size-12 font-weight-400 line-height-120 text-primary-x">{{ errMsg }}</div>
  </div>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
  label: { type: String },
  modelValue: { type: String, required: true },
  errMsg: { type: String, default: '' },
  placeholder: { type: String, default: '請輸入訊息...' },
  disabled: { type: Boolean, default: false },
  bgDark: { type: Boolean, default: false },
  line: { type: Number, default: 3 },
  heightFull: { type: Boolean, default: false },
})

const emits = defineEmits(['update:modelValue'])

const value = computed({
  get() {
    return props.modelValue
  },
  set(newValue) {
    emits('update:modelValue', newValue)
  },
})

const height = computed(() => {
  // 1.225 = 14px(font-size) * 1.4(line-height) / 16(轉成rem)
  // 2 = 上下個 1rem padding
  return `${props.line * 1.225 + 2}rem`
})
</script>

<style lang="scss" scoped>
.textarea-wrap {
  display: flex;
  flex-direction: column;
  &.h-full {
    height: 100%;
  }
  textarea {
    width: 100%;
    padding: 1rem;
    border-radius: 0.625rem;
    outline: none;
    letter-spacing: 0.2px;
    resize: none;

    &.error {
      border: 0.0625rem solid rgb(var(--v-theme-primary-x));
      background: linear-gradient(0deg, rgba(235, 0, 27, 0.1) 0%, rgba(235, 0, 27, 0.1) 100%),
        rgb(var(--v-theme-background));
    }

    &::placeholder {
      font-weight: 400;
      color: rgb(var(--v-theme-input));
    }

    &:disabled {
      opacity: 0.5;
    }
    &.h-full {
      height: 100%;
    }
  }

  .err-msg {
    text-align: right;
  }
}
</style>
